<template>
	<view>
		<view class="list">
			<text class="title">联系方式</text>
			<input type="text" placeholder="请输入选填" v-model="formList.phone"  />
			<!-- <image src="https://hosue-omo.oss-cn-shenzhen.aliyuncs.com/assets/rightIcon.png" mode="" class="more_icon"></image> -->
		</view>
		<view class="line" />
		<view class="list">
			<text class="title">意见/建议</text>
		</view>
		<view class="list" style="padding-top: 0;">
			<textarea placeholder="请输入（最多允许300字）" placeholder-style="color:#ccc;" 
			class="textarea" v-model="formList.remark" maxlength='300' />
		</view>

		<view class="bottom_box">
			<view class="add_btn" @click="handleClick">
				提交
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from 'vue'
	import {feedbackAdd} from './js/api.js'
	import {validatePhone} from '@/uitls/check.js'
	const app = getApp()
	const formList = reactive({
		phone:app.globalData.phoneNumber,
		remark:''
	})
	import http from '@/uitls/http.js'
	const handleClick = ()=>{
		// console.log('dshhfhfh--------',formList)
		if(!validatePhone(formList.phone)){
			http.isMssage('请正确输入手机号')
			return false
		}
		if(!formList.remark) return http.isMssage('请输入意见/建议再提交')
		// console.log('通过了')
		// return false
		feedbackAdd(formList).then(res=>{
			// console.log('res===',res)
			if(res.data.code==0){
				http.isMssage('感谢您的建议')
				setTimeout(()=>{
					uni.navigateBack()
				},200)
				return false
			}
			http.isMssage(res.data.message)
			
		})
	}
</script>
<style>
	page {
		background: #F6F6F6 !important;
	}
</style>
<style lang="less" scoped>
	.list {
		display: flex;
		align-items: center;
		padding: 30rpx;
		background: #FFFFFF;
		position: relative;

		.title {
			font-family: PingFangSC-Regular;
			font-size: 28rpx;
			color: #333333;
			font-weight: 400;
			width: 140rpx;
			text-align: left;
		}

		input {
			font-size: 28rpx;
		}

		.more_icon {
			position: absolute;
			right: 30rpx;
			top: 34rpx;
			width: 24rpx;
			height: 40rpx;
		}

		.textarea {
			width: 658rpx;
			height: 200rpx;
			// margin: auto;
			background: #F8F8F8;
			border: 1rpx solid rgba(238, 238, 238, 1);
			border-radius: 8rpx;
			padding: 16rpx;
			font-size: 28rpx;
		}
	}

	.line {
		background: #eeeeee;
		height: 1rpx;
		margin: 0 30rpx;
	}

	.tip {
		font-family: PingFangSC-Regular;
		font-size: 24rpx;
		color: #666666;
		font-weight: 400;
		padding-left: 30rpx;
		margin-top: 30rpx;
	}

	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx 0 60rpx 0;
		background: #FFFFFF;
		width: 100%;

		.add_btn {
			width: 626rpx;
			height: 90rpx;
			line-height: 90rpx;
			background-image: linear-gradient(270deg, #F1B13F 0%, #F8D648 100%);
			border-radius: 50rpx;
			font-family: PingFangSC-Regular;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			font-weight: 400;
		}
	}
</style>